<template>
  <div class="merchant-chart">
    <div id="merchant-map" style="height:100%"></div>
  </div>
</template>

<script>
  export default {
    props: {
      merchants: {
        type: Array,
        required: true
      }
    },

    // watch:{
    //   merchants(){
    //     this.markerLayer.setMap(null);
    //     this.infoWindow.close();
    //     this.setMarker();
    //   }
    // },

    data() {
      return {
        map: null,
        infoWindow: null,
        merchantMap: null,
        markerLayer: null,
        imgUrl0: require('assets/images/marker-0.png'),
        imgUrl1: require('assets/images/marker-1.png')
      };
    },

    mounted() {
      this.initMap();
      this.setMarker();
    },

    methods: {
      initMap() {
        let center = new TMap.LatLng(27.77553979428615, 120.45762166407053);
        let map = new TMap.Map('merchant-map', {
          center: center,
          zoom: 14,
          viewMode: '2D'
        });

        let infoWindow = new TMap.InfoWindow({
          map: map,
          position: new TMap.LatLng(39.984104, 116.307503),
          offset: {
            x: -8,
            y: -32
          }
        });
        infoWindow.close();

        this.infoWindow = infoWindow;
        this.map = map;
      },

      setMarker() {
        let merchants = this.merchants;
        let geometries = [];
        let merchantMap = {};
        for (let i = 0; i < merchants.length; i++) {
          const merchant = merchants[i];
          let id = `merchant-${i}`;
          merchantMap[id] = merchant;
          geometries.push({
            id: id,
            styleId: `marker-${merchant.status}`,
            position: new TMap.LatLng(merchant.lat, merchant.lng)
          });
        }
        this.merchantMap = merchantMap;

        let markerLayer = new TMap.MultiMarker({
          id: "marker-layer",
          map: this.map,
          styles: {
            'marker-0': new TMap.MarkerStyle({
              width: 25,
              height: 35,
              anchor: {
                x: 16,
                y: 32
              },
              src: this.imgUrl0
            }),
            'marker-1': new TMap.MarkerStyle({
              width: 25,
              height: 35,
              anchor: {
                x: 16,
                y: 32
              },
              src: this.imgUrl1
            })
          },
          geometries: geometries
        });

        let infoWindow = this.infoWindow;
        markerLayer.on("click", evt => {
          let geometry = evt.geometry;
          let id = geometry.id;
          let merchant = this.merchantMap[id];
          if (merchant === undefined) {
            return;
          }
          let text = this.getMerchantInfo(merchant);

          infoWindow.setPosition(geometry.position);
          infoWindow.setContent(text);
          infoWindow.open();
        });

        this.markerLayer = markerLayer;
      },

      getMerchantInfo(merchant) {
        let status = merchant.status;
        let statusColor = status === 0?'#ff0000':'#11b95c';
        let createTime = merchant.createTime;
        createTime = this.$moment(createTime).format('YYYY-MM-DD');

        let info = `
          <div style="text-align:left;min-width:200px;font-size:16px">
            <div style="font-size:18px;text-align:center">${merchant.name}</div>
            <div class="clearfix">
              <span style="float:right">${merchant.majorBranch===0?'分店':'总店'}</span>
            </div>
            <div>
              <span>${createTime} 注册</span>
              <span style="float:right;color:${statusColor}">${status===0?'禁用':'启用'}</span>
            </div>
          </div>
        `;

        return info;
      },

      resetMarker(hasClose){
        if (hasClose) {
          this.infoWindow.close();
        }
        this.markerLayer.setMap(null);
        this.setMarker();
      }
    }
  };

</script>

<style lang="scss" scoped>
  .merchant-chart {
    height: 100%;
  }

</style>
